<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <el-form :model="form" label-width="auto" style="max-width: 100%">
        <el-form-item label="地址信息" style="display: flex; margin-top: 15px">
          <el-select
            style="width: 120px"
            @change="provinceChange"
            v-model="form.province"
            placeholder="请选择省份"
          >
            <el-option
              v-for="v in provinceList"
              :key="v.provinceId"
              :label="v.pname"
              :value="v.provinceId"
            />
          </el-select>
          <el-select
            style="width: 120px; margin-left: 10px"
            v-model="form.city"
            placeholder="请选择市"
          >
            <el-option
              v-for="v in cityList"
              :key="v.cityId"
              :label="v.cityName"
              :value="v.cityId"
            />
          </el-select>
          <el-input
            style="width: 282px; margin-left: 10px"
            v-model="form.location"
            placeholder="请输入详细地址"
          />
        </el-form-item>

        <div style="display: flex">
          <div style="width: 55%; margin-right: 10px">
            <el-form-item label="指数等级" style="margin-top: 15px">
              <el-radio-group v-model="form.aqi">
                <el-radio value="1"
                  ><el-button type="success" plain>一</el-button></el-radio
                >
                <el-radio value="2"
                  ><el-button type="success" color="#baae00" plain
                    >二</el-button
                  ></el-radio
                >
                <el-radio value="3"
                  ><el-button type="success" color="#ffb000" plain
                    >三</el-button
                  ></el-radio
                >
                <el-radio value="4"
                  ><el-button type="success" color="#ff4600" plain
                    >四</el-button
                  ></el-radio
                >
                <el-radio value="5"
                  ><el-button type="success" color="#006bff" plain
                    >五</el-button
                  ></el-radio
                >
                <el-radio value="6"
                  ><el-button type="success" color="#b000ff" plain
                    >六</el-button
                  ></el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="上传图片" style="margin-top: 15px">
              <el-upload
                class="avatar-uploader"
                :action="baseUrl + '/supervisor-api/file/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="imageUrl"
                  :src="imageUrl"
                  class="avatar"
                  style="width: 140px; height: 140px"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="反馈信息" style="margin-top: 15px">
              <el-input
                v-model="form.feedback"
                :rows="7"
                type="textarea"
                maxlength="30"
                show-word-limit
                style="width: 85%; font-size: larger"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="feedbackSubmit">提交</el-button>
            </el-form-item>
          </div>
          <div style="width: 40%">
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName"
              class="aqi-table"
            >
              <el-table-column prop="date" label="序号" width="60" />
              <el-table-column prop="name" label="评级" width="60" />
              <el-table-column prop="address" label="描述" />
            </el-table>
          </div>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import FeedbackAPI from "@/api/feedback";
import DistrictAPI from "@/api/district";
import { ElMessage } from "element-plus";
import type { UploadProps } from "element-plus";

const imageUrl = ref("");
const baseUrl = ref("");
baseUrl.value = import.meta.env.VITE_APP_BASE_API;

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(response);
  console.log(uploadFile);
  form.fileUploadImgId = response.data.data[0].imgId;
  console.log(form.fileUploadImgId);
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("只能上传jpeg图片!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大于 2MB!");
    return false;
  }
  return true;
};

const form: any = reactive({
  province: "",
  city: "",
  location: "",
  aqi: "",
  feedback: "",
  fileUploadImgId: "",
});

const provinceList: any = ref([]);

const cityList: any = ref([]);

const onSubmit = () => {
  console.log("submit!");
};

const tableData = [
  {
    date: "一",
    name: "优",
    address: "空气质量令人满意，基本无空气污染",
  },
  {
    date: "二",
    name: "良",
    address:
      "空气质量可接受，但某些污染物口能对极少数异常敏感人群健康有较弱影响",
  },
  {
    date: "三",
    name: "轻度污染",
    address: "易感人群症状有轻度加剧，健康人群出现刺激定状",
  },
  {
    date: "四",
    name: "中度污染",
    address: "进一步加副易感人群症状，可能对健康人群心脏、呼吸系统有影响",
  },
  {
    date: "五",
    name: "重度污染",
    address:
      "心性病和肺病患者症状显著加剧，运动耐要力降低，健康人群普遍出现症状",
  },
  {
    date: "六",
    name: "严重污染",
    address: "健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病",
  },
];

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any;
  rowIndex: number;
}) => {
  if (rowIndex === 0 || rowIndex === 2 || rowIndex === 4) {
    return "warning-row";
  } else if (rowIndex === 1 || rowIndex === 3 || rowIndex === 5) {
    return "success-row";
  }
  return "";
};

function reqProvinceList() {
  DistrictAPI.provinceList().then((res) => {
    for (const v of res) {
      provinceList.value.push(v);
    }
  });
}

function reqCityList() {
  DistrictAPI.cityList(form.province).then((res) => {
    for (const v of res) {
      cityList.value.push(v);
    }
  });
}

onMounted(() => {
  reqProvinceList();
});

function provinceChange(v: any) {
  console.log(v);
  console.log(form.province);
  cityList.value = [];
  form.city = "";
  reqCityList();
}

function feedbackSubmit() {
  if (form.province == "") {
    ElMessage({
      message: "请选择省份",
      type: "warning",
    });
    return;
  }
  if (form.city == "") {
    ElMessage({
      message: "请选择市",
      type: "warning",
    });
    return;
  }
  if (form.location == "") {
    ElMessage({
      message: "请输入详细地址",
      type: "warning",
    });
    return;
  }
  if (form.aqi == "") {
    ElMessage({
      message: "请选择预测AQI等级",
      type: "warning",
    });
    return;
  }
  if (form.feedback == "") {
    ElMessage({
      message: "请输入反馈信息",
      type: "warning",
    });
    return;
  }
  FeedbackAPI.submitFeedback(form).then((res) => {
    console.log(res);
    form.province = "";
    form.city = "";
    form.location = "";
    form.aqi = "";
    form.feedback = "";
    imageUrl.value = "";
    ElMessage({
      showClose: true,
      message: "反馈成功",
      type: "success",
    });
  });
}
</script>


<style>
.aqi-table .warning-row {
  --el-table-tr-bg-color: #fff;
}

.aqi-table .success-row {
  --el-table-tr-bg-color: #eee;
}

/* 添加边框和列名居中的样式 */
.aqi-table {
  border: 1px solid #e6e6e6; /* 表格边框 */
  border-bottom: none; /* 移除底部边框，避免与表格容器的边框重叠 */
}

.aqi-table th.is-leaf,
.aqi-table td {
  border-right: 1px solid #e6e6e6; /* 单元格右边边框 */
  border-bottom: 1px solid #e6e6e6; /* 单元格底部边框 */
}

.aqi-table th {
  text-align: center; /* 列名居中 */
  background-color: #f5f7fa; /* 可选：为表头添加背景色 */
}

.el-table__body tr:hover > td {
  background-color: #f5f7fa; /* 可选：为鼠标悬浮行添加背景色 */
}

/* 调整按钮的内边距 */
.el-radio-button__inner {
  padding: 5px 10px; /* 根据需要调整 */
}

/* 调整按钮之间的外边距 */
.el-radio-button:first-child .el-radio-button__inner {
  margin-left: 0; /* 移除第一个按钮的左边距 */
}

.el-radio-button:last-child .el-radio-button__inner {
  margin-right: 0; /* 移除最后一个按钮的右边距 */
}

/* 使用Flexbox布局 */
.el-radio-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 调整按钮组的间距 */
.el-radio {
  margin-right: 10px; /* 根据需要调整 */
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 140px;
  height: 140px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  text-align: center;
}
</style>
